<template>
	<view class="classlist">
		<view class="goback" :style="{top:getstatusbar()+'px'}" @click="goback">
			<uni-icons type="left" color="#fff"></uni-icons>
		</view>
		<view class="content" :style="{marginTop:getnavber()+'px'}">
			<navigator url="/pages/preview/preview" v-for="item in 10" class="item">
				<image src="/common/images/preview2.jpg" mode="aspectFill"></image>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		getstatusbar,getnavber
	} from '@/utils/system';
	const goback = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		padding: 5rpx;
		.item {
			height: 440rpx;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
	.goback {
		position: fixed;
		width: 60rpx;
		height: 60rpx;
		background: pink;
		z-index: 99;
		left: 30rpx;
		margin-left: 0;
		border-radius: 100px;
		top: 0;
		backdrop-filter: blur(10rpx);
		border: 1px solid rgba(255, 255, 255, .3);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>